<template>
	<el-form ref="form" label-width="100px" :model="form" :inline="inline" >
		<el-form-item v-for="item in formLabel" :key="item.label" :label="item.label">
			<el-input
			v-if="item.type ==='input'"
			:placeholder = "'请输入'+item.label"
			v-model = "form[item.model]"
			>	
			</el-input>
			<el-switch v-if="item.type ==='switch'" v-model = "form[item.model]">	
			</el-switch>
			<el-date-picker
				v-if="item.type ==='date'"
				type = "date"
				value-format = "yyyy-mm-dd"
				placeholder="选择日期"
				v-model = "form[item.model]"
			>	
			</el-date-picker>
			<el-select
				v-if="item.type ==='select'"
				placeholder="请选择"
				v-model = "form[item.model]"
			>
				<el-option
					v-for="item in item.opts"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				>	
				</el-option>	
			</el-select>
		</el-form-item>
		
		<slot></slot>	
		<div class="footer">
			<div style="margin-left: auto;">
				<el-button @click="onClose()">取消</el-button>
				<el-button type="primary" @click="confirm()">确定</el-button>
			</div>
		</div>	
	</el-form>
	
</template>

<script>
	export default{
		name:'CommonForm',
		props:{
			formLabel:Array,
			form:Object,
			inline:Boolean	
		},
		data(){
			return{
				isShow : false
			}
		},
		methods: {
			confirm() {
				this.$emit('onConfirm', {... this.form})
			},
			onClose(){
				this.$emit('onClose')
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.footer{
		display: flex;
		
	}
</style>
